import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { argTypesView } from "./helpers/helpers";

export const docs= { source: { code: "timestamp := component.NewTimestamp(time.Unix(1586469079, 0))"} }

export const timestampView = { metadata: {type: "timestamp"}, config: {timestamp: 1588716648} }

export const TimestampStoryTemplate = args => ({
  template: `<app-view-timestamp [view]= "view"></app-view-timestamp>`,
  argTypes: argTypesView,
  props: { view: args.view },
});

<h1>Timestamp component</h1>
<h2>Description</h2>

<p>
    Timestamp is used to present time.
    Time is presented in relative form based on current time.
    This is very useful when displaying age of objects or files.
</p>
<h2>Example</h2>

<Meta title="Components/Timestamp" argTypes = { argTypesView } />

<Canvas withToolbar>
  <Story name="Timestamp"
         parameters={{ docs: docs }}
         args= {{ view: timestampView }}>
    { TimestampStoryTemplate.bind({}) }
  </Story>
</Canvas>

<h2>Props</h2>
<ArgsTable story = "Timestamp" />

